import React, { useState } from 'react';
import { AudioOutlined } from '@ant-design/icons';
import { Input, Table, Button, message } from 'antd';
import Link from 'next/link';
import axios from 'axios';

const { Search } = Input;

const InputContent = () => {
    const [inputValue, setInputValue] = useState('');
    const [data, setData] = useState([]);

    const columns = [
        {
            title: '股票代码',
            dataIndex: 'code',
            key: 'code',
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '价格',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '涨跌幅度',
            dataIndex: 'rate',
            key: 'rate',
        },
        {
            title: '详情',
            key: 'action',
            render: (_, record) => (
                <Link href={`/detail/${record.code}`} passHref>
                    <Button type="link">Details</Button>
                </Link>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <>
                    <Button type="link" onClick={() => handleAddToFavorites(record.code)}>加入自选</Button>
                    <Button type="link" onClick={() => handleDeleteToFavorites(record.code)}>删除自选</Button>
                </>
            ),
        }
    ];

    const handleAddToFavorites = async (code) => {
        try {
            const data = {
                stock_code: code
            };
            const token = localStorage.getItem('token'); // 从localStorage获取token
            const response = await axios.post('./api/user/add_optional_stock', data, { // 确保第二个参数是一个空对象，表示请求体
                headers: {
                Authorization: `Bearer ${token}`  // 在请求头中设置Authorization
                }
            });
            console.log("加入自选成功:", response.data);
            const ResultMessage = response.data.msg;
            message.success(ResultMessage);
        } catch (error) {
            console.error("Error adding to favorites:", error);
            // 可以在这里处理错误，例如显示错误消息
            console.log("加入自选失败:", error.response.data.msg);
            const ResultMessage = error.response.data.msg;
            //console.log("获得的数据是:",ResultMessage);
            message.error(ResultMessage);
        }
    };

    const handleDeleteToFavorites = async (code) => {
        try {
            const data = {
                stock_code: code
            };
            const token = localStorage.getItem('token'); // 从localStorage获取token
            const response = await axios.post('./api/user/delete_optional_stock', data, { // 确保第二个参数是一个空对象，表示请求体
                headers: {
                Authorization: `Bearer ${token}`  // 在请求头中设置Authorization
                }
            });
            console.log("删除自选成功:", response.data);
            const ResultMessage = response.data.msg;
            message.success(ResultMessage);
        } catch (error) {
            console.error("Error adding to favorites:", error);
            console.log("删除自选失败:", error.data);
            const ResultMessage = error.response.data.msg;
            //console.log("获得的数据是:",ResultMessage);
            message.error(ResultMessage);
        }
    };
    

    const onSearch = value => {
        console.log("User input:", value);
        setInputValue(value);
        fetchData(value);
    };

    const fetchData = async (query) => {
        const payload = {
            content: query
        };
        try {
            const response = await axios.post('api/stock/query_stock', payload);
            //const response = await axios.get('./query_stock.json')
            setData(response.data.data); // Assuming the data is under { data: [...] }
            console.log("Data from API:", response.data);
        } catch (error) {
            console.error("Error fetching data:", error);
        }
    };

    const suffix = (
        <AudioOutlined
            style={{
                fontSize: 16,
                color: '#1677ff',
            }}
        />
    );

    return (
        <>
            <Search
                placeholder="请输入要查询的股票名称或代码"
                size="large"
                suffix={suffix}
                onSearch={onSearch}
                enterButton
            />
            <Table columns={columns} dataSource={data} rowKey="code" />
        </>
    );
};

export default InputContent;


















//目前是这个
// import React, { useState } from 'react';
// import { AudioOutlined } from '@ant-design/icons';
// import { Input, Table, Button } from 'antd';
// import axios from 'axios';
// import StockDetail from './stockDetail';

// const { Search } = Input;

// const InputContent = () => {
//     const [inputValue, setInputValue] = useState('');
//     const [data, setData] = useState([]);

//     const columns = [
//         {
//             title: '股票代码',
//             dataIndex: 'code',
//             key: 'code',
//         },
//         {
//             title: '名称',
//             dataIndex: 'name',
//             key: 'name',
//         },
//         {
//             title: '价格',
//             dataIndex: 'price',
//             key: 'price',
//         },
//         {
//             title: '涨跌幅度',
//             dataIndex: 'rate',
//             key: 'rate',
//         },
//         {
//             title: '详情',
//             key: 'action',
//             render: (_, record) => (
//                 <Button type="link" onClick={() => window.location.href = `/detail/${record.code}`}>
//                     Details
//                 </Button>
//             ),
//         },
//     ];

//     const onSearch = value => {
//         console.log("User input:", value);
//         setInputValue(value);
//         fetchData(value);
//     };

//     const fetchData = async (query) => {
//         const payload = {
//             content: query
//         };
//         try {
//             //const response = await axios.post('api/stock/query_stock', payload);
//             const response = await axios.get('./query_stock.json')
//             setData(response.data.data); // Assuming the data is under { data: [...] }
//             console.log("Data from API:", response.data);
//         } catch (error) {
//             console.error("Error fetching data:", error);
//         }
//     };

//     const suffix = (
//         <AudioOutlined
//             style={{
//                 fontSize: 16,
//                 color: '#1677ff',
//             }}
//         />
//     );

//     return (
//         <>
//             <Search
//                 placeholder="请输入要查询的股票名称或代码"
//                 size="large"
//                 suffix={suffix}
//                 onSearch={onSearch}
//             />
//             <Table columns={columns} dataSource={data} rowKey="code" />
//         </>
//     );
// };

// export default InputContent;











// import React, { useState } from 'react';
// import { useNavigate } from 'react-router-dom';
// import { AudioOutlined } from '@ant-design/icons';
// import { Input, Table, Button } from 'antd';
// import axios from 'axios';

// const { Search } = Input;

// const InputContent = () => {
//     const [inputValue, setInputValue] = useState('');
//     const [data, setData] = useState([]);
//     const navigate = useNavigate(); // 获取navigate对象

//     const columns = [
//         {
//             title: '股票代码',
//             dataIndex: 'code',
//             key: 'code',
//         },
//         {
//             title: '名称',
//             dataIndex: 'name',
//             key: 'name',
//         },
//         {
//             title: '价格',
//             dataIndex: 'price',
//             key: 'price',
//         },
//         {
//             title: '涨跌幅度',
//             dataIndex: 'rate',
//             key: 'rate',
//         },
//         {
//             title: '详情',
//             key: 'action',
//             render: (_, record) => (
//                 <Button type="link" onClick={() => navigate(`/detail/${record.code}`)}>
//                     Details
//                 </Button>
//             ),
//         },
//     ];

//     const onSearch = value => {
//         console.log("User input:", value);
//         setInputValue(value);
//         fetchData(value);
//     };

//     const fetchData = async (query) => {
//         const payload = {
//             content: query
//         };
//         try {
//             const response = await axios.get('./query_stock.json'); // 示例API调用
//             setData(response.data.data); // 假设响应数据结构为{ data: [...] }
//             console.log("Data from API:", response.data);
//         } catch (error) {
//             console.error("Error fetching data:", error);
//         }
//     };

//     const suffix = (
//         <AudioOutlined
//             style={{
//                 fontSize: 16,
//                 color: '#1677ff',
//             }}
//         />
//     );

//     return (
//         <>
//             <Search
//                 placeholder="请输入要查询的股票名称或代码"
//                 size="large"
//                 suffix={suffix}
//                 onSearch={onSearch}
//                 enterButton
//             />
//             <Table columns={columns} dataSource={data} rowKey="code" />
//         </>
//     );
// };

// export default InputContent;












// import React, { useState } from 'react';
// import { AudioOutlined } from '@ant-design/icons';
// import { Input } from 'antd';
// import axios from 'axios'; // 引入axios

// const { Search } = Input;

// const InputContent = () => {
//     const [inputValue, setInputValue] = useState('');

//     const onSearch = value => {
//         console.log("用户输入的数据：", value);
//         setInputValue(value);
//         fetchData(value);
//     };

//     const fetchData = async (query) => {
//         const payload = {
//             content: query
//         };
//         try {
//             const response = await axios.post('api/stock/query_stock', payload);
//             const data = response.data;
//             console.log("API返回的数据：", data);
//         } catch (error) {
//             console.error("请求API时出错：", error);
//         }
//     };

//     const suffix = (
//         <AudioOutlined
//             style={{
//                 fontSize: 16,
//                 color: '#1677ff',
//             }}
//         />
//     );

//     return (
//         <Search
//             placeholder="请输入要查询的股票名称或代码"
//             size="large"
//             suffix={suffix}
//             onSearch={onSearch}
//         />
//     );
// };

// export default InputContent;